<template>
  <chart class="line-chart" :auto-resize="true" :options="options"> </chart>
</template>

<script>
// import { graphic } from 'echarts/lib/export'

// var base = +new Date(1968, 9, 3)
// var oneDay = 24 * 3600 * 1000
// var date = []

// var data = [Math.random() * 300]

// for (var i = 1; i < 20000; i++) {
//   var now = new Date(base += oneDay)
//   date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'))
//   data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]))
// }

export default {
  data() {
    return {
      options: {
        title: {
          // text: "配套设施分布",
        },
        // 提示框
        tooltip: {},
        xAxis: {
          data: [
            "住宅区",
            "文化教育",
            "写字楼",
            "风景名胜",
            "购物服务",
            "医疗保健",
            "公共厕所",
            "交通设施",
          ],
          // min: function(value) {
          //   return value.min + 1;
          // },

          // 设置x轴的字体颜色
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
            },
            // 设置x轴的标示样式
            interval: 0,
            rotate: -40,
            align: "center",
            margin: 30,
            fontSize: 9,
          },
        },
        yAxis: {
          // 不显示y轴
          show: false,
        },
        // color: ["#6ca0fc"],
        series: [
          {
            name: "配套设施",
            label: {
              show: true,
              position: "top",
            },
            type: "bar",
            barWidth: 10,
            itemStyle: {
              // color: "rgba(0,0,0,0.05)",
              // 圆柱体
              color: function(paras) {
                var colorList = [
                  "#6ca0fc",
                  "#37b3cf",
                  "#6ca0fc",
                  "#37b3cf",
                  "#6ca0fc",
                  "#37b3cf",
                  "#6ca0fc",
                  "#37b3cf",
                ];
                return colorList[paras.dataIndex];
              },
              barBorderRadius: [18, 18, 0, 0],
            },
            data: [90, 12, 68, 19, 76, 9, 98, 27],
          },
        ],
      },
    };
  },
};
</script>
